// 配合useFetch使用，主要是设置了常用的表格设置，使用的时候可以自定义表格参数，规则同antd的表格参数
// 分页的页码，当前页面，和分页大小按照传入的为主，即使通过pagination参数主动设置也不会被覆盖
// 排序的情况要给columns设置“rankKey”

import React, { useState, useRef } from 'react';

import { Table, TableProps } from 'antd';

import { SorterResult } from 'antd/es/table/interface';

import { ColumnsType } from 'antd/lib/table';

import { page } from '../typings';

interface tableType {
  /** 等待 */ loading: boolean;
  /** 列表格式 */ columns: (sort: any) => ColumnsType;
  /** 分页 */ page: page;
  /** 列表数据 */ list: any[];
  /** 设置分页 */ setPage: (e: page) => void;
}

export default function(
  props: tableType & TableProps<any>,
): {
  /** 表格节点 */ DOM: ({ ...otherProps }: TableProps<any>) => JSX.Element;
  /** 排序的参数 */ rankParams: React.MutableRefObject<{
    /** 排序字段 */ field: SorterResult<any>['field'];
    /** 排序类型'descend'降序 | 'ascend'升序 | null不排序 */ order: SorterResult<any>['order'];
  }>;
  /** 重置排序（一般查询接口参数修改时要重置，作为触发请求的effect） */ resetRank: () => void;
} {
  const { loading, columns, page, list, setPage, ...otherProps } = props;

  const [sort, setSort] = useState<{
    order: string;
    columnKey: string;
    orderKey: number;
  }>({
    order: '',
    columnKey: '',
    orderKey: '',
  }); // 同时只有一列进行对比

  const rankParams = useRef<{
    field: SorterResult<any>['field'];
    order: SorterResult<any>['order'];
  }>({ field: '', order: null });

  const DOM = ({ ...otherProps }: TableProps<any>): JSX.Element => (
    <Table
      loading={loading}
      columns={columns.constructor === Function ? columns(sort || {}) : columns}
      bordered
      dataSource={list || []}
      onChange={(pagination, filters, sorter: SorterResult<any>, extra) => {
        if (extra.action === 'paginate')
          setPage({
            ...page,
            current: pagination.current || page.current,
            pageSize: pagination.pageSize || page.pageSize,
          });
        else if (extra.action === 'sort') {
          setSort({
            order: sorter?.order || '',
            columnKey: sorter?.field || '',
            orderKey: sorter?.column?.rankKey || '',
          });
          rankParams.current = { field: sorter.field, order: sorter.order };
        }
      }}
      {...otherProps}
      pagination={{
        showTotal: e => `共计${e}条记录`,
        showSizeChanger: true,
        ...otherProps.pagination,
        ...page,
      }}
    />
  );
  return {
    DOM,
    rankParams,
    resetRank: () => {
      setSort({ order: '', columnKey: '', orderKey: '' });
      rankParams.current = {
        field: '',
        order: rankParams.current.order === null ? undefined : null,
      };
    },
  };
}
